<template>
  <!-- echarts封装公共组件 -->
  <div ref="echart"></div>
</template>

<script>
    import * as echart from 'echarts'
    export default {
        props: {
            //区分是什么图标
            isAxisChart: {
                type: Boolean,
                default:true
            },
            //接收options传进来的参数
            chartData: {
                type: Object,
                //确保不调用组件时的容错性
                default(){
                    return {
                        xData: [],
                        series: []
                    }
                }
            }
        },
        //对传入的chartData进行监听
        watch:{
            chartData:{
                handler: function () {
                    this.initChart()
                },
                deep: true
            }
        },
        methods: {
            initChart(){
                this.initChartData()
                //渲染echart
                if(this.echart){
                    //绘图
                    this.echart.setOption(this.options)
                }else{
                    //如果不存在，初始化echart对象并赋值
                    this.echart = echart.init(this.$refs.echart)
                    //绘图
                    this.echart.setOption(this.options)
                }
            },
            initChartData(){
                if (this.isAxisChart) {
                    this.axisOption.xAxis.data = this.chartData.xData
                    this.axisOption.series = this.chartData.series
                }else{
                    //如果是饼状图
                    this.normalOption.series = this.chartData.series
                }
            }
        },
        data() {
            return {
                //柱状图数据
                axisOption:{
                    // 图例文字颜色
                    textStyle: {
                    color: "#333",
                    },
                grid: {
                    left: "20%",
                },
                // 提示框
                tooltip: {
                    trigger: "axis",
                },
                xAxis: {
                    type: "category", // 类目轴
                    data: [],
                    axisLine: {
                    lineStyle: {
                        color: "#17b3a3",
                    },
                    },
                    axisLabel: {
                    interval: 0,
                    color: "#333",
                    },
                },
                yAxis: [
                    {
                    type: "value",
                    axisLine: {
                        lineStyle: {
                        color: "#17b3a3",
                        },
                    },
                    },
                ],
                color: ["#2ec7c9", "#b6a2de"],
                series: [],
                },
                //饼状图数据
                normalOption:{
                    tooltip: {
                        trigger: "item",
                    },
                    color: [
                        "#0f78f4",
                        "#dd536b",
                        "#9462e5",
                        "#a6a6a6",
                        "#e1bb22",
                        "#39c362",
                        "#3ed1cf",
                    ],
                    series: [],
                },
                echart: null
            }
        },
        computed: {
            options() {
                return this.isAxisChart ? this.axisOption : this.normalOption
            }
        }
    }
</script>

<style>

</style> 